@import '@/styles/variables.scss';

@media screen and (min-width: $mobile-device) {
  .animeCard {
    margin-right: 1rem;
    margin-top: 1rem;
    height: 30rem;
    width: 98%;
    border-radius: 10px;
    overflow: hidden;
    //border: 0.2rem solid rgb(250, 14, 73);
    background-color: rgb(170,170,195);
    user-select: none;
    transition: all 0.4s ease;

    .card {
      height: 115%;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      position: relative;
      cursor: pointer;
      .img {
        width: 100%;
        height: 70%;
        flex-shrink: 0;
      }
      .info {
        padding: 1rem;
        flex: 1;
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: left;
        color: #e9f0ff;

        .title {
          font-size: 1.3rem;
        }

        .rating {
          display: flex;
          justify-content: space-between;
        }
      }
    }

    &:hover {
      transform: translateY(-10px);
    }
  }
}

@media screen and (min-width: $pad-device) {
  .animeCard {
    height: 26rem;
    width: 20rem;
    flex-shrink: 0;
    transition: all 0.5s ease;
    .card {
      .img {
        width: 100%;
      }
      .info {
        padding: 1rem;
        flex: 1;
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: left;
        color: #e9f0ff;

        .title {
          font-size: 1.3rem;
        }

        .rating {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

@media screen and (min-width: $smallpc-device) {
  .animeCard {
    height: 26rem;
    width: 20rem;
    flex-shrink: 0;
    transition: all 0.5s ease;
    .card {
      .img {
        width: 100%;
      }
      .info {
        padding: 1rem;
        flex: 1;
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: left;
        color: #e9f0ff;

        .title {
          font-size: 1.3rem;
        }

        .rating {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
